<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <link rel="stylesheet" th:href="@{/adminlte/layui/css/layui.css}"  media="all"/>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="demoTableOverGoodsStock">
    产品名称：
    <div class="layui-inline" style="width: 220px;">
       <!-- <input class="layui-input"  id="goodsNameSearchOverGoodsStock" autocomplete="off" style="width: 200px;height: 25px" placeholder="请选择产品名称"/>-->
        <select id="goodsNameSearchOverGoodsStock" style="width: 200px;height: 25px">
            <option value="">请选择产品名称</option>
            <option th:each="goodsNameP1:${goodsNameP}" th:value="${goodsNameP1.dataname}" th:text="${goodsNameP1.dataname}"></option>
        </select>
    </div>
    产品规格：
    <div class="layui-inline" style="width: 220px">
        <!--<input class="layui-input"  id="goodsSpecificationsSearchOverGoodsStock" autocomplete="off" style="width: 200px;height: 25px" placeholder="请输入产品规格"/>-->
        <select id="goodsSpecificationsSearchOverGoodsStock" style="width: 200px;height: 25px">
            <option value="">请选择产品规格</option>
            <option th:each="specificationsP1:${specificationsP}" th:value="${specificationsP1.dataname}" th:text="${specificationsP1.dataname}"></option>
        </select>
    </div>
    进气方向：
    <div class="layui-inline" style="width: 220px">
     <!--   <input class="layui-input"  id="intakeDirection" autocomplete="off" style="width: 200px;height: 25px"/>-->
        <select id="intakeDirectionOverGoodsStock" lay-verify=""  style="width: 200px" >
            <option value="" >请选择进气方向</option>
            <option value="左进气" >左进气</option>
            <option value="右进气" >右进气</option>
        </select>
    </div>
    <div class="layui-inline" style="margin-left: -15px">操作员名称：</div>
    <div class="layui-inline" style="width: 220px">
        <input class="layui-input"  id="operatorSearchOverGoodsStock" autocomplete="off" style="width: 200px;height: 25px" placeholder="请输入操作员名称"/>
    </div><br/>
    起始日期：
    <div class="layui-inline" style="width: 220px">
        <input class="layui-input"  id="startDateSearchOverGoodsStock" autocomplete="off" style="width: 200px;height: 25px" placeholder="请选择起始日期"/>
    </div>
    截止日期：
    <div class="layui-inline" style="width: 220px">
        <input class="layui-input"  id="endDateSearchOverGoodsStock" autocomplete="off" style="width: 200px;height: 25px" placeholder="请选择截止日期"/>
    </div>
    <button class="layui-btn layui-btn-sm" data-type="reload">查询</button>
</div>
<table class="layui-table" lay-data="{totalRow:true,url:'/overGoods/queryOverGoodsStock', page:true, id:'idTestOverStock',toolbar: 'true',defaultToolbar:['exports'] }" lay-filter="demoOverStock">
    <thead>
    <!--<tr>
        <th lay-data="{field:'goodsName', width:150}">产品名称</th>
        <th lay-data="{field:'specifications', width:150}">产品规格</th>
        <th lay-data="{field:'intakeDirection', width:150}">进气方向</th>
        <th lay-data="{field:'stockWarehouse', width:150 ,totalRowText:'合计：'}">库存仓库</th>
        <th lay-data="{field:'nums', width:150,totalRow:true}">库存数量</th>
        <th lay-data="{field:'operator', width:150}">操作人</th>
        <th lay-data="{field:'operatorTime', width:200}">操作时间</th>
        <th lay-data="{field:'remarks', width:520}">备注</th>
    </tr>-->
    <tr>
        <th lay-data="{align:'center'}" colspan="5">产品信息</th>
        <th lay-data="{align:'center'}" colspan="4">阀门信息</th>
        <th lay-data="{align:'center'}" colspan="4">控制主板信息</th>
        <th lay-data="{align:'center'}" colspan="4">通讯主板信息</th>
        <th lay-data="{align:'center'}" colspan="4">485主板信息</th>
        <!-- totalRowText:'合计：'-->
        <!--<th lay-data="{field:'goodsStock', width:150 }">入库仓库</th>-->
        <!--<th lay-data="{field:'addGoodsNums', width:150,totalRow:true}">入库后数量</th>-->
        <th lay-data="{field:'operator', width:150}" rowspan="2">操作人</th>
        <th lay-data="{field:'operatorTime', width:200}" rowspan="2">操作时间</th>
        <th lay-data="{field:'remarks', width:520}" rowspan="2">备注</th>
    </tr>
    <tr>
        <th lay-data="{field:'goodsName', width:150}">产品名称</th>
        <th lay-data="{field:'specifications', width:170}">产品规格</th>
        <th lay-data="{field:'pressure', width:150}">使用压力</th>
        <th lay-data="{field:'stockWarehouse', width:150 ,totalRowText:'合计：'}">库存仓库</th>
        <th lay-data="{field:'nums', width:150,totalRow:true,totalRow:true}">库存数量</th>
        <th lay-data="{field:'valveSupplier', width:150}">阀门厂商</th>
        <th lay-data="{field:'valveName', width:150}">阀门名称</th>
        <th lay-data="{field:'valveSpecifications', width:150}">阀门规格</th>
        <th lay-data="{field:'intakeDirection', width:150}">进气方向</th>
        <th lay-data="{field:'controlMainboardSupplier', width:150}">控制主板厂商</th>
        <th lay-data="{field:'controlMainboardName', width:150}">控制主板名称</th>
        <th lay-data="{field:'controlMainboardSpecifications', width:150}">型号规格</th>
        <th lay-data="{field:'version', width:150}">程序版本</th>
        <th lay-data="{field:'telMainBoardSupplier', width:150}">通讯主板厂商</th>
        <th lay-data="{field:'telMainBoardName', width:150}">通讯主板名称</th>
        <th lay-data="{field:'telMainBoardSpecifications', width:150}">型号规格</th>
        <th lay-data="{field:'telType', width:150}">通讯方式</th>
        <th lay-data="{field:'fourSupplier', width:150}">485主板厂商</th>
        <th lay-data="{field:'fourMainBoardName', width:150}">485主板名称</th>
        <th lay-data="{field:'fourSpecifications', width:150}">型号规格</th>
        <th lay-data="{field:'telProtocol', width:150}">通信协议</th>

    </tr>
    </thead>
</table>
<script th:src="@{/adminlte/layui/layui.js}" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use('table', function(){
        var table = layui.table;
        var $ = layui.$, active = {
            reload:function () {
                var startDate = $("#startDateSearchOverGoodsStock").val();
                var intakeDirection = $("#intakeDirectionOverGoodsStock").val();
                var goodsName = $("#goodsNameSearchOverGoodsStock").val();
                var specifications = $("#goodsSpecificationsSearchOverGoodsStock").val();
                var operator = $("#operatorSearchOverGoodsStock").val();
                var endDate = $("#endDateSearchOverGoodsStock").val();
                table.reload('idTestOverStock',{
                    url:'/overGoods/serchOverGoodsStock',
                    where:{intakeDirection:intakeDirection,goodsName:goodsName,specifications:specifications,operator:operator,startDate:startDate,endDate:endDate}  ,
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                })

            }
        };
        $('.demoTableOverGoodsStock .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        laydate.render({
            elem: '#startDateSearchOverGoodsStock' //指定元素
            ,type: 'datetime'
        });
        laydate.render({
            elem: '#endDateSearchOverGoodsStock' //指定元素
            ,type: 'datetime'
        });
    });
    var unSelected = "#999";
    var selected = "#333";
    $(function () {
        $("select").css("color", unSelected);
        $("option").css("color", selected);
        $("select").change(function () {
            var selItem = $(this).val();
            if (selItem == $(this).find('option:first').val()) {
                $(this).css("color", unSelected);
            } else {
                $(this).css("color", selected);
            }
        });
    })
</script>

</body>
</html>